<template>
  <common-search
    :show-item="2"
    :col-layout="{ xxl: 6, xl: 8, lg: 8, md: 12, sm: 24, xs: 24 }"
    v-model="query"
    :formItems="formItems"
    @search="search"
    @reset="reset"
  ></common-search>
  <a-button
    type="primary"
    @click="exportData"
    :loading="uploadLoading"
    v-modulePerm="['newProductGMV:export']"
  >
    <template #icon>
      <ExportOutlined />
    </template>
    导出
  </a-button>
  <common-table
    :customFilterDropdown="true"
    :columns="columns"
    :dataSource="dataList"
    v-model:localPagination="page"
    @paginationChange="onPageChange"
    v-model:loading="loading"
    :rowKey="(record) => record.id"
    :scroll="{ x: 'max-content' }"
  >
  </common-table>
</template>
<script setup>
import CommonSearch from "@/components/commonSearch/index.vue";
import CommonTable from "@/components/commonTable/index.vue";
import { useSearchTable } from "@/hooks/table/useSearchTable";
import { message } from "ant-design-vue";
import { getNewProductGMV } from "@/api/standard/newProductGMV";
import { postFile } from "@/utils/service/index";
import { ref } from "vue";
import dayjs from "dayjs";
const uploadLoading = ref(false);
const { dataList, query, loading, page, search, reset, onPageChange } =
  useSearchTable({
    searchAPI: getNewProductGMV,
    queryFactory: () => {
      let now = dayjs();
      let year = now.format("YYYY");
      let month = now.format("MM");
      let day = now.format("DD");
      return {
        time: ["2025-01-01", `${year}-${month}-${day}`],
      };
    },
    beforeSearch: () => {
      //处理日期
      if (query.value.time) {
        query.value.orderCreateTimeBegin = query.value.time[0];
        query.value.orderCreateTimeEnd = query.value.time[1];
      } else {
        delete query.value.orderCreateTimeBegin;
        delete query.value.orderCreateTimeEnd;
      }
    },
  });

const columns = ref([
  {
    dataIndex: "spu",
    title: "spu",
    align: "center",
    fieldType: "String",
    type: "input",
  },
  {
    dataIndex: "currencyCode",
    title: "货币",
    align: "center",
    fieldType: "String",
    type: "input",
  },
  {
    dataIndex: "ninetyDayGmv",
    title: "90天gmv",
    align: "center",
    fieldType: "String",
    type: "input",
  },
  {
    dataIndex: "ninetyDayOemGmv",
    title: "90天OEMgmv",
    align: "center",
    fieldType: "String",
  },
  {
    dataIndex: "ninetyDayOdmGmv",
    title: "90天ODMgmv",
    align: "center",
  },
  {
    dataIndex: "ninetyExpandGmv",
    title: "90天拓展品gmv",
    align: "center",
  },
  {
    dataIndex: "oneHundredAndEightyDayGmv",
    title: "180天gmv",
    align: "center",
  },
  {
    dataIndex: "oneHundredAndEightyDayOemGmv",
    title: "180天OEMgmv",
    align: "center",
  },
  {
    dataIndex: "oneHundredAndEightyDayOdmGmv",
    title: "180天ODMgmv",
    align: "center",
  },
  {
    dataIndex: "oneHundredAndEightyDayExpandGmv",
    title: "180天拓展品gmv",
    align: "center",
  },
]);
const formItems = ref([
  {
    label: "spu",
    type: "input",
    field: "spuCode",
  },
  {
    label: "下单日期",
    type: "rangePicker",
    field: "time",
    showTime: false,
  },
]);
const exportData = async () => {
  try {
    uploadLoading.value = true;
    const res = await postFile(
      "/new_product_gmv/export",
      "post",
      query.value,
      "新品GMV.xlsx"
    );
    message.success("导出成功");
  } catch (e) {
    message.error(e);
  } finally {
    uploadLoading.value = false;
  }
};
</script>
<script>
export default {
  name: "orderStandardization-newProductGMV",
};
</script>
<style scoped></style>
